<template>
    <el-descriptions title="用户信息" border>
        <template #extra>
            <el-button type="primary" @click="openUpdateInfoDialog">修改信息</el-button>
            <el-button type="primary" @click="openUpdatePasswordDialog">修改密码</el-button>
        </template>
        <el-descriptions-item label="昵称">{{ user.nickname }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
    </el-descriptions>
    <div>
        <el-dialog v-model="updatePasswordDialog" title="修改密码">
            <el-form ref="passwordForm" :model="updatePasswordForm" :rules="rules" label-position="top">
                <el-form-item label="当前密码" prop="currentPassword">
                    <el-input type="password" v-model="updatePasswordForm.oldPassword" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" v-model="updatePasswordForm.newPassword" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="confirmNewPassword">
                    <el-input type="password" v-model="updatePasswordForm.confirmPassword"
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updatePassword">修改密码</el-button>
                    <el-button @click="cancelUpdatePasswordDialog">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="updateInfoDialog" title="修改个人信息">
            <el-form ref="infoForm" :model="updateInfoForm" :rules="rules" label-position="top">
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="updateInfoForm.nickname" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateInfo(updateInfoForm)">修改</el-button>
                    <el-button @click="cancelUpdateInfoDialog">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import type {ResponseInterface, UserInterface} from "@/type/models";
import {updatePasswordAPI, updateUserInfoAPI} from "@/api/UserAPI";
import {ElMessage} from "element-plus";

const user = reactive<UserInterface>(JSON.parse(localStorage.getItem("user") || "{}"))
const token = localStorage.getItem("token") as string
//-------begin update password
let updatePasswordDialog = ref(false)
const updatePasswordForm = reactive({
    oldPassword: "",
    newPassword: "",
    confirmPassword: ""
})
const rules = {
    currentPassword: [
        {required: true, message: '请输入当前密码', trigger: ['blur', 'change']},
    ],
    newPassword: [
        {required: true, message: '请输入新密码', trigger: ['blur', 'change']},
        {min: 6, max: 20, message: '新密码长度应在6到20个字符之间', trigger: ['blur', 'change']},
    ],
    confirmNewPassword: [
        {required: true, message: '请再次输入新密码', trigger: ['blur', 'change']},
        {validator: validateConfirmPassword, trigger: ['blur', 'change']},
    ],
};

function validateConfirmPassword(rule: any, value: string, callback: any) {
    if (value !== updatePasswordForm.newPassword) {
        callback(new Error('两次输入的新密码不一致'));
    } else {
        callback();
    }
}

function openUpdatePasswordDialog() {
    updatePasswordDialog.value = true
    Object.assign(updatePasswordForm, {
        oldPassword: "",
        newPassword: "",
        confirmPassword: ""
    })
}

function cancelUpdatePasswordDialog() {
    updatePasswordDialog.value = false
}

async function updatePassword() {
    const r: ResponseInterface = await updatePasswordAPI(token, updatePasswordForm.oldPassword, updatePasswordForm.newPassword)
    if (r.code == 200) {
        ElMessage.success("修改密码成成功")
        cancelUpdatePasswordDialog()
    }
}

//-------end update password
//-------begin update info
let updateInfoDialog = ref(false)
const updateInfoForm = reactive<UserInterface>({})
const updateInfoRules = {
    nickname: [
        {required: true, message: '请输入昵称', trigger: ['blur', 'change']},
        {min: 2, max: 20, message: '昵称长度应在2到20个字符之间', trigger: ['blur', 'change']},
    ]
}

function openUpdateInfoDialog() {
    updateInfoDialog.value = true
    Object.assign(updateInfoForm, user)
}

function cancelUpdateInfoDialog() {
    updateInfoDialog.value = false
}

async function updateInfo(form: UserInterface) {
    const r: ResponseInterface = await updateUserInfoAPI(token, form);
    if (r.code == 200) {
        ElMessage.success("修改信息成功")
        Object.assign(user, r.data)
        localStorage.setItem("user", JSON.stringify(user))
        cancelUpdateInfoDialog()
    }
}

//-------end update info
</script>

<style scoped>

</style>